<template>
    <div>
        <MBX
            level="角色管理"
            level2="角色列表"
        ></MBX>
        <el-card>
            <el-row>
                <el-col>
                    <el-button
                        type="primary"
                        @click="dialogVisible=true"
                    >添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roles">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div>
                            <el-row
                                v-for="(item,index) in scope.row.children"
                                :key="index"
                                style="border:1px solid #f2f2f2"
                            >
                                <el-col :span="6">
                                    <el-tag
                                        closable
                                        @close="guanbitag(scope.row,item.id)"
                                    >
                                        {{item.authName}}
                                    </el-tag>
                                </el-col>
                                <el-col :span="18">
                                    <el-row
                                        v-for="(itm,ind) in item.children"
                                        :key="ind"
                                    >
                                        <el-col :span="6">
                                            <el-tag
                                                closable
                                                type="success"
                                                @close="guanbitag(scope.row,itm.id)"
                                            >
                                                {{itm.authName}}
                                            </el-tag>
                                        </el-col>
                                        <el-col :span="18">
                                            <el-tag
                                                type="info"
                                                closable
                                                v-for="(it,id) in itm.children"
                                                :key="id"
                                                @close="guanbitag(scope.row,it.id)"
                                            >
                                                {{it.authName}}
                                            </el-tag>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="#"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="角色名称"
                    prop="roleName"
                ></el-table-column>
                <el-table-column
                    label="角色描述"
                    prop="roleDesc"
                ></el-table-column>
                <el-table-column label="描述">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                size="mini"
                                @click="editroles(scope.row)"
                            >编辑</el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="mini"
                                @click="delroles(scope.row)"
                            >删除</el-button>
                            <el-button
                                type="warning"
                                icon="el-icon-setting"
                                size="mini"
                                @click="fenpeiquanxian(scope.row)"
                            >分配权限</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加角色模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-form :model="rolesform">
                <el-form-item label="角色名称">
                    <el-input v-model="rolesform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="rolesform.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="rolesadd"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加角色模态框 -->
        <!-- 编辑角色模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
        >
            <el-form :model="editrolesform">
                <el-form-item label="角色名称">
                    <el-input v-model="editrolesform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="editrolesform.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="editrolesok"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑角色模态框 -->
        <!-- 分配权限模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
        >
            <el-tree
                :data="rolesChildren"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="checkedid"
                :props="defaultProps"
                :default-expand-all="true"
                ref="treelistchildren"
            >
            </el-tree>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="rolesaddok"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配权限模态框 -->
    </div>
</template>

<script>
export default {
  data() {
    return {
      roles: [],
      rolesChildren: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      rolesform: {
        roleName: "",
        roleDesc: ""
      },
      editrolesform: {
        roleName: "",
        roleDesc: "",
        id: 0
      },
      defaultProps: {
        children: "children",
        label: "authName"
      },
      checkedid: [],
      rolesid: 0
    };
  },
  created() {
    this.xr();
  },
  methods: {
    //   渲染角色列表
    async xr() {
      let res = await this.$API.jueseliebiao();
      console.log("角色列表", res);

      this.roles = res;
    },
    // 添加角色
    async rolesadd() {
      let res = await this.$API.tianjiajuese(this.rolesform);
      console.log("添加角色", res);
      this.dialogVisible = false;
      this.xr();
    },
    // 编辑回填
    editroles(row) {
      console.log("回填角色信息", row);
      this.dialogVisible1 = true;
      this.editrolesform.roleName = row.roleName;
      this.editrolesform.roleDesc = row.roleDesc;
      this.editrolesform.id = row.id;
    },
    // 编辑提交角色
    async editrolesok() {
      let res = await this.$API.bianjijuese(this.editrolesform);
      console.log("编辑角色", res);
      this.dialogVisible1 = false;
      this.xr();
    },
    // 删除角色
    async delroles(row) {
      let res = await this.$API.shanchujuese(row.id);
      console.log("删除角色", res);
      this.xr();
    },
    // 打开分配权限模态框
    async fenpeiquanxian(row) {
      this.checkedid = [];
      //   console.log("角色列表son", row);
      this.dialogVisible2 = true;
      //   角色权限列表请求
      let res = await this.$API.juesequanxian();
      console.log("角色权限列表请求", res);

      this.rolesChildren = res;
      console.log("角色列表son", this.rolesChildren);
      this.digui(row, this.checkedid);
      this.rolesid = row.id;
    },
    // 递归
    digui(row, checkedid) {
      console.log("递归row", row);
      console.log("递归checkedid", checkedid);
      if (!row.children) {
        return checkedid.push(row.id);
      }
      row.children.forEach(item => {
        this.digui(item, checkedid);
      });
    },
    // 提交角色权限
    async rolesaddok() {
      let shuzu1 = this.$refs.treelistchildren.getCheckedKeys();
      let shuzu2 = this.$refs.treelistchildren.getHalfCheckedKeys();
      console.log("被选中节点", shuzu1);
      console.log("被半选中节点", shuzu2);
      //   合并id
      let checkedkeysid = [...shuzu1, ...shuzu2];
      let checkedkeysidstr = checkedkeysid.join(",");
      console.log("合并的", checkedkeysid);
      //   请求接口
      let res = await this.$API.jueseshouquan(this.rolesid, checkedkeysidstr);
      this.dialogVisible2 = false;
      this.xr();
    },
    // 关闭标签
    async guanbitag(row, id) {
      console.log("关闭标签row", row);
      console.log("关闭标签id", id);
      let res = await this.$API.shanchujuesezhidingid(row.id, id);
      console.log("删除变迁", res);
      this.xr();
    }
  }
};
</script>

<style scoped >
.el-tag {
  margin: 5px;
}
</style>
